<template>
  <div class="Ordersynthesis">
    <div class="bj">
      <van-nav-bar title="订单详情" style="background: #68c5ba;width: 100%;position: fixed;top: 0;">
        <van-icon @click="routejump" name="arrow-left" slot="left" color="#FFFFFF" />
      </van-nav-bar>
    </div>
    <div style="width: 100%;height: 46px;"></div>
    <div style="width: 100%;">
      <div style="width: 100%;height: 100%;margin-top: 1.25rem;background: #f8f8f8;">
        <div class="ticket">
          <div style="width: 95%;height: 100%;">
            <div class="adult-ticket">
              <span style="color: rgb(40, 40, 40);font-weight: 600;">{{datalist.Name}}</span>
            </div>

            <div v-if="datalist.ChooseDateType == 1">
              <div class="playdate">
                <div style="height:40px;width: 100%;display: flex;align-items: center;color: rgb(40, 40, 40);font-weight: 600;font-size: 16px;">游玩日期<span style="font-size: 12px;margin-left: 10px;">当天有效</span></div>
                <div class="selectdate">
                  <div class="selectdate-div" :class="{active:index == 1}" @click="selectdate(qiansanriqiA[0].nian,qiansanriqiA[0].yue,qiansanriqiA[0].ri,qiansanriqiA[0].Price,1)">
                    <div>今日{{qiansanriqiA[0].yue}}-{{qiansanriqiA[0].ri}}</div>
                    <div><span v-show="qiansanriqiA[0].Price != undefined">￥</span>{{qiansanriqiA[0].Price}}</div>
                  </div>
                  <div class="selectdate-div" :class="{active:index == 2}" @click="selectdate(qiansanriqiB[0].nian,qiansanriqiB[0].yue,qiansanriqiB[0].ri,qiansanriqiB[0].Price,2)">
                    <div>明日{{qiansanriqiB[0].yue}}-{{qiansanriqiB[0].ri}}</div>
                    <div><span v-show="qiansanriqiB[0].Price != undefined">￥</span>{{qiansanriqiB[0].Price}}</div>
                  </div>
                  <div class="selectdate-div" :class="{active:index == 3}" @click="selectdate(qiansanriqiC[0].nian,qiansanriqiC[0].yue,qiansanriqiC[0].ri,qiansanriqiC[0].Price,3)">
                    <div>后日{{qiansanriqiC[0].yue}}-{{qiansanriqiC[0].ri}}</div>
                    <div><span v-show="qiansanriqiC[0].Price != undefined">￥</span>{{qiansanriqiC[0].Price}}</div>
                  </div>
                  <div @click="vanpopup" :class="{active:index == 4}" style="display: flex;align-items: center; width: 25%;margin-left: 0.9375rem;background: #ddf1ef;justify-content: center;">
                    <p style="width: 100px;text-align: center;">{{time}}</p>
                    <van-icon name="arrow" />
                  </div>
                  <van-popup position="bottom" style="width: 100%;height: 300px;" v-model="riqishow">
                    <div style="width: 100%;height: 2.5rem;display: flex;align-items: center;justify-content: space-around;border-bottom: #B5B5B5 solid 1px;position: fixed;background: white;">
                      <span>日</span>
                      <span>一</span>
                      <span>二</span>
                      <span>三</span>
                      <span>四</span>
                      <span>五</span>
                      <span>六</span>
                    </div>
                    <div style="width: 100%;height: 30px;"></div>
                    <div v-for="(data,index) in res" :key="index">
                      <div style="height: 2.5rem;line-height: 2.5rem;">{{data.nian}}年{{data.yue}}月</div>
                      <div style="display: flex;flex-wrap: wrap;">
                        <div v-for="(ri,index) in data.data" :key="index" style="display: flex;flex-direction: column;align-items: center;width: 14.2%;overflow: hidden;font-size: 12px;">
                          <div style="display: flex;flex-direction: column;width: 80%;overflow: hidden;margin-top: 4px;" @click="selectdate(data.nian,data.yue,ri.riqi,ri.Price,4)">
                            <span style="text-align: center;">{{ri.riqi}}</span>
                            <div style="text-align: center;"><span><span v-show="ri.Price != undefined">￥</span>{{ri.Price}}</span></div>
                          </div>
                        </div>
                      </div>
                    </div>
                    <div style="height: 3.75rem;"></div>
                  </van-popup>
                </div>
                <div style="height: 1.25rem;"></div>
              </div>
              <div class="period" v-if="datalist.HourList != null">
                <p style="color: rgb(40, 40, 40);font-size: 14px;">入园时间段</p>
                <van-dropdown-menu>
                  <van-dropdown-item v-model="value1" :options="option1" @change="dropdomn" />
                </van-dropdown-menu>
              </div>
            </div>
            <div v-else></div>
          </div>
        </div>
      </div>
      <div class="select">
        <div v-if="ticketlist && ticketlist.length > 0">
          <div class="select_select" v-for="(ticket,indexx) in ticketlist" :key="indexx">
            <div class="select_box">
              <div class="select_top">
                <div>
                  <span style="font-size: 18px;margin-right: 5px;">{{ticket.Title}}票</span>
                  <span style="color: #46d0ca;">景区要求实名制入园</span>
                </div>
              </div>
              <span style="color: #46d0ca;font-size: 20px;">￥{{ticket.Price}}</span>
            </div>
            <div class="select_bottm">
              <div style="height: 50px;" v-if="ticket.Key == 0"></div>
              <div class="pedometer" v-else>
                <div class="notice" @click="clickshow(ticket.Tip)">
                  <span>订票须知</span>
                  <van-icon name="arrow" />
                </div>
                <div class="ddto" style="color: #5c5c5c;">
                  <div style="margin: 5px 5px;" v-for="(newarr,index) in ticket.newarr" :key="index">
                    <div style="position: absolute;border: none;display: flex;flex-direction: row-reverse;">
                      <van-icon name="close" @click="iconshanchu(newarr.piSN,ticket.Title,indexx)" />
                    </div>
                    <span>{{newarr.UName}}</span>
                  </div>
                  <div v-show="ticket.newarr.length != 5" style="margin: 5px 5px;" @click="selectLinkMan(ticket)">添加旅客</div>
                </div>
                <div style="width: 100%;height: 10px;"></div>
              </div>
            </div>
            <div style="width: 100%;height: 10px;"></div>
          </div>
        </div>
        <div class="aaa" v-if="ticketlist == ''">
          <div style="display: flex;height: 40px;align-items: center;justify-content: space-between;padding: 0 10px;">
            <span>价格</span>
            <span style="width: 90px;text-align: center;font-size: 18px;color: #46D0CA;">￥{{datalist.Price}}</span>
          </div>
          <div style="display: flex;height: 40px;align-items: center;justify-content: space-between;padding: 0 10px;">
            <span>数量</span>
            <van-stepper v-model="stepper" @change="stepperdata" min="1" max="5" />
          </div>
        </div>
      </div>

      <div class="couponGroup" v-if="couponList.length>0">
        <p class="couponGroup_txt">推荐优惠券</p>
        <div class="yd-checklist-item" v-for="(item ,index) in couponList" :key="index">
          <van-checkbox :value="item.gSN" v-model="item.isChecked" checked-color="#15C481" @click="chooseChange(item.gSN, item)"></van-checkbox>
          <div class="couponGroup_data">
            <div style="display:flex; height: 40px;align-items: center;justify-content: space-between;padding: 0 10px;">
              <span>{{item.Name}}</span>
              <span style="width: 90px;text-align: center;font-size: 18px;color: #46D0CA;">￥{{item.Price}}</span>
            </div>
            <div style="display: flex;height: 40px;align-items: center;justify-content: space-between;padding: 0 10px;">
              <span>数量</span>
              <van-stepper v-model="item.SaleNum" @change="stepperCoupon(item)" min="1" max="5" />
            </div>
          </div>
        </div>
      </div>
      <div class="scheduler">
        <p class="scheduler_txt">{{UserInfoConfig.Title}}</p>
        <div class="scheduler_data">
          <div class="data_name" v-for="(name,index) in UserInfoConfig.List" :key="index">
            <span>{{name.Title}}：</span>
            <input v-show="name.Key != 'Area'" v-model="name.name" :maxlength="name.hanzhi" type="text" @click="inputdata(name.Key)" :placeholder="name.Tip" @blur="onBlurInput()" />
            <div v-model="Areaname" class="areaname" :class=" { Areaname:Areaname.length > 6}" v-show="name.Key == 'Area'" @click="inputdata(name.Key)">{{Areaname}}</div>
          </div>
        </div>
      </div>
    </div>
    <div class="terms">
      <van-checkbox v-model="checked"></van-checkbox>
      <span style="margin-left: 4px;">已阅读并通用</span>
      <span style="color: #46d0ca;margin-left: 4px;" @click="tk">安易游预定条款</span>
    </div>
    <div style="width: 100%;height: 60px;"></div>
    <div class="bottom">
      <div class="detail">
        <span style="color: #f59a23;">总额￥{{totalMoney || 0}}</span>
        <!-- <div @click="detail">
          <span style="color: #46d0ca;margin-left: 10px;">明细</span>
          <van-icon name="arrow-up" />
        </div> -->
      </div>
      <van-button type="default" color="#46d0ca" @click="Result">去支付</van-button>
    </div>
    <div class="tk_box">
      <van-popup v-model="tiaokuan" closeable position="bottom">
        <div class="tiaok_txt">
          <span>安易游预定条例</span>
          <van-icon @click="gbtk" name="close" />
        </div>
        <div style="width: 100%;height: 40px;"></div>
        <div class="tiaok" style="color: #5c5c5c;">
          <div style="margin-top: 10px;">1.服务内容</div>
          <p>安易游旅游网（以下简称“安易游”）各项服务的所有权与运作权归景域旅游运营集团所有。本服务条款具有法律约束力。一旦您点选确认下单成功提交订单后，即表示您自愿接受本协议之所有条款，并同意通过青云游订购旅游产品。"</p>
          <div>2.特别提示</div>
          <p>所有权与运作权归景域旅游运营集团所有。本服务条款具有法律约束力。一旦您点选确认下单成功提交订单后，即表示您自愿接受本协议之所有条款，并同意通过青云游订购旅游产品。</p>
          <div>3.订单生效</div>
          <p>本服务条款具有法律约束力。一旦您点选确认下单成功提交订单后，即表示您自愿接受本协议之所有条款，并同意通过青云游订购旅游产品。</p>
          <div>4.景区订单</div>
          <p>各项服务的所有权与运作权归景域旅游运营集团所有。本服务条款具有法律约束力。一旦您点选确认下单成功提交订单后，即表示您自愿接受本协议之所有条款，并同意通过青云游订购旅游产品。</p>
        </div>
      </van-popup>
    </div>
    <van-popup class="lvke" v-model="SelectLinkMan" closeable position="right">
      <div class="bj">
        <van-nav-bar @click-left="LinkManleft()" style="background: #ececec;" title="旅客" left-text="" left-arrow>
        </van-nav-bar>
        <van-icon @click="lianxren" class="ioc" name="add" size="20" style="position: absolute;z-index: 99;right: 20px;top: 12px;" />
      </div>
      <div style="width: 100%;height: 46px;"></div>
      <div v-if="Passengerlist.length == 0" class="wudingdan">
        <van-icon name="description" />
        <p>亲,暂无旅客信息</p>
      </div>
      <div v-else class="xuanzhe">
        <van-radio-group v-model="radio" @change="change">
          <div class="yd-checklist-item" v-for="(itme,index) in Passengerlist" :key="index">
            <van-radio checked-color="#46d0ca" style="margin-left: 0.75rem;" :name="itme.piSN">
              <div>{{itme.RealName}} {{itme.Mobile}} {{itme.IDCardNo}}</div>
            </van-radio>
          </div>
          <!-- <div class="yd-checklist-item">
                <van-radio checked-color="#46d0ca" style="margin-left: 0.75rem;" name="2">单选框 2</van-radio>
              </div> -->
        </van-radio-group>
      </div>
      <!-- <div style="width: 100%;display: flex;align-items: center;height: 100px;justify-content: center;position: fixed;bottom: 0px;background: white;">
          <van-button style="width: 80%;" color="#46d0ca" type="default" @click="yeslvke">确认</van-button>
        </div> -->
    </van-popup>
    <van-popup v-model="ticketshow" position="bottom" :style="{ height: '40%' }">
      <p style="padding: 10px;" v-html="datalist.UserHelp"></p>
    </van-popup>
    <van-popup v-model="arrow" position="bottom" :style="{ height: '20%' }">
      <div style="padding: 10px;font-size: 16px;">费用明细</div>
      <div style="padding: 5px 20px;display: flex;justify-content: space-between;font-size: 14px;" v-for="(arrow,index) in storagepiao" :key="index">
        <span>{{datalist.Name}}-{{arrow.name}}票</span>
        <span>{{arrow.Price}}元×{{arrow.value}}</span>
      </div>
    </van-popup>
    <van-popup v-model="shouhuodizhi" position="bottom" :style="{ height: '40%' }">
      <van-area @confirm="confirm" :area-list="areaList" />
    </van-popup>
    <van-popup v-model="editlink" position="right" :style="{ height: '100%',width:'100%'}">
      <div class="bj">
        <van-nav-bar @click-left="editlinkleft()" style="background: #ececec;" title="添加旅客信息" left-text="" left-arrow>
        </van-nav-bar>
      </div>
      <div style="width: 100%;height: 46px;"></div>
      <van-cell-group>
        <van-field class="border" label="姓名" v-model="editlinkName" placeholder="请输入用户名" />
        <van-field class="border" label="手机号" maxlength="11" v-model="editlinkPhone" placeholder="请输入手机号" />
        <van-field class="border" v-for="(data,index) in editlinkdata" :key='index' :label="data.Title" v-model="data.label" placeholder="请输入正确的证件号" />
      </van-cell-group>
      <van-cell-group>
        <van-switch-cell active-color='#46d0ca' v-model="linkchecked" title="设为默认" />
      </van-cell-group>
      <div style="width: 100%;height: 6.25rem;display: flex;justify-content: center;align-items: center;">
        <van-button @click="PassengerDo" style="width: 80%;background:#46d0ca; color: white;" round type="default">保存</van-button>
      </div>
    </van-popup>
  </div>
</template>

<script>
import {
  goodsDetails, // 商品门票列表详情
  DatePriceList, // 日期价格列表
  PassengerList, // 我的常用游客列表
  DatePriceDeails, // 日期价格详情
  PassengerPriceList,  // 身份库存价格列表
  PassengerDo, // 提交收货人信息接口
  CredentialsList, // 获取填写什么身份接口
  getUserInfoByToken, // 获取用户信息接口
  createOrder  // 下单
} from '@/api/home.js'
import { getToken } from '@/utils'
import Cookies from 'js-cookie'
import AddressInfo from '@/assets/area.js'
export default {
  name: 'vdetails',
  data () {
    return {
      isactive: true,
      readonly: false,
      linkchecked: false, // 默认选中
      linkmoren: '',
      editlinkName: '',
      editlinkPhone: '',
      Areaname: '请选择省市区',
      editlinkdata: [],
      editlink: false, // 弹出填写收货人信息页面
      areaList: AddressInfo, // 选择城市
      shouhuodizhi: false, // 收货地址
      ticketshow: false, // 订票须知
      showzi: '', // 订票须知的文字
      stepper: 1, // 步进器 数量
      index: 0, // 三天时间选中的时间

      tiaokuan: false, // 安易游预定条例
      SelectLinkMan: false, // 旅客列表
      lvkelist: [], // 旅客数组
      Passengerlist: [],
      lvkearray: [], // 选中旅客数组
      newarr: [], // 空数组
      lvkeObject: [], // 选中那张票的对象
      Selectedlvke: [], // 确定之后传入的数组
      checked: true, // 协议
      radio: '',
      arrow: false, // 费用明细
      riqishow: false, // 日期
      price: '', // 价格
      PreSalePeriod: '',
      datalist: {}, // 商品详情数据
      config: [], // 协议
      time: '更多日期', // 选中的日期
      time1: '', // 传入时间段请求的值
      res: [], // 日期数组
      timedata: [], // 传日期过去的数组
      ticketlist: [], // 把请求票的数据传入
      UserInfoConfig: [], // 请求留资的数组传入

      qiansanriqiA: [], // 三天的日
      qiansanriqiB: [],
      qiansanriqiC: [],
      Checkin: '', // 今天入住的日期
      roomsday: '1', // 几晚
      Departure: '', // 离店的日期
      week1: '', // 星期
      week2: '', // 星期
      // -------------特产------------------
      // 接收保存过来的地址数据
      resdata: {},
      details_money: '',
      details_value: '1',
      // -----------------------
      jinqiri: '', // 选择日期
      value1: 0,
      option1: [], // 获取入园时间
      selectedRefTag: [], // 酒店多选传进时间
      // 提交
      Pricejiu: '', // 定义一个价格，传到当用户加时
      storagepiao: [], // 存储票
      Totalcost: 0, // 总价格
      jiage: [], // 定义一个价格数组
      couponList: [],  //优惠券列表
      couponArray: [], //选中优惠券列表
      couponStepper: 1, // 优惠券步进器 数量
      couponTotal: 0,
      couponRadio: '',
      gautoid: 0,
      selectedData: []
    }
  },
  computed: {
    totalMoney () {
      let totalPrice = 0
      totalPrice = this.couponTotal + this.Totalcost;
      return totalPrice;
    }
  },
  methods: {
    getUserInfoByToken () {
      let data = {}
      getUserInfoByToken(data).then(res => {
        console.log(res)
        if (res.Code === 5 && res.Msg == "请先绑定手机号码") {
          this.$router.push({
            path: "/Login/BindCellphone"
          });
        } else if (res.Code == 0) {

        } else {
          Cookies.set('token', '', {
            expires: 7,
            path: '/'
          }) // 设置7天过期
        }

        // if (res.Code == 0) { } else {
        //   Cookies.set('token', '', {
        //     expires: 7,
        //     path: ''
        //   }) // 设置7天过期
        // }
      })
    },
    vdetailsdata () { // 订单数据请求
      let data = {
        resSN: this.$route.query.resSN, // 标识
        gSN: this.$route.query.gSN
      }
      goodsDetails(data).then(res => { // 订单数据请求
        console.log(res)
        this.datalist = res.Item
        if (res.Item.CouponList && res.Item.CouponList.length > 0) {
          this.couponList = res.Item.CouponList
        }
        if (res.Item.PassengerInfoConfig == null) {
        } else {
          if (Array.isArray(res.Item.PassengerInfoConfig)) {
            this.ticketlist = res.Item.PassengerInfoConfig
            this.ticketlist.forEach(v => {
              v.Price = res.Item.Price
              v.shul = v.Key
              v.newarr = []
            })
          } else {
            this.ticketlist = [res.Item.PassengerInfoConfig]
            this.ticketlist.forEach(v => {
              v.Price = res.Item.Price
              v.shul = v.Key
              v.newarr = []
            })
          }
        }
        this.UserInfoConfig = res.Item.UserInfoConfig
        this.UserInfoConfig.List.forEach(v => {
          if (v.Key == 'Mobile') {
            v.hanzhi = '11'
          }
          v.name = ''
        })
        this.PreSalePeriod = res.Item.PreSalePeriod
        let data = res.Item.HourList
        if (data != null) {
          data.forEach((v) => {
            this.option1.push({
              text: v.Begin + '-' + v.End,
              value: v.hSN
            })
          })
          this.value1 = this.option1[0].value
        }
      })
    },
    DatePriceList () { // 景区请求每天的价格
      let timedata = this.timedata
      let data = {
        gSN: this.$route.query.gSN,
        Begin: timedata[this.PreSalePeriod - 1],
        End: timedata[0]
      }
      DatePriceList(data).then(res => {
        function isArray (o) {
          return Object.prototype.toString.call(o) == '[object Array]'
        }
        if (res.List.length > 0) {
          if (this.datalist.PassengerInfoConfig == null) {
            this.stepperdata(1)
          }
          let newriqiA = res.List[0]
          let newriqiB = res.List[0]
          let newriqiC = res.List[0]
          let shulA = newriqiA.Date.replace(/\:/g, '-').split('-')
          let shulB = newriqiB.Date.replace(/\:/g, '-').split('-')
          let shulC = newriqiC.Date.replace(/\:/g, '-').split('-')
          this.qiansanriqiA.push({
            nian: shulA[0],
            yue: shulA[1],
            ri: shulA[2],
            Price: newriqiA.Price
          })
          this.qiansanriqiB.push({
            nian: shulB[0],
            yue: shulB[1],
            ri: shulB[2],
            Price: newriqiB.Price
          })
          this.qiansanriqiC.push({
            nian: shulC[0],
            yue: shulC[1],
            ri: shulC[2],
            Price: newriqiC.Price
          })
          if (isArray(this.datalist.PassengerInfoConfig) == false) {
            this.datalist.Price = res.List[0].Price
          }
          res.List.map((ListItem, ListIndex) => {
            const listDate = ListItem.Date.slice(0, 7)
            const listRiQi = ListItem.Date.slice(8)
            this.res.map((resItem, resIndex) => {
              const resDate = resItem.nian + '-' + resItem.yue
              if (Object.is(listDate, resDate)) {
                resItem.data.map((mapItem, mapIndex) => {
                  if (mapItem.riqi && Object.is(mapItem.riqi, listRiQi)) {
                    mapItem.Price = ListItem.Price
                    this.$set(this.ticketlist)
                  }
                })
              }
            })
          })
        }
      })
    },
    couponChange (name) { // 选择优惠券
      // let couponArray = [] // 自定义一个选中数组
      // this.couponList.forEach((v) => {
      //   if (v.gSN == name) {
      //     couponArray.push(v)
      //     this.couponArray = couponArray // 选中的数组
      //   }
      // })
      // let jieqian = this.couponArray[0].Price * this.couponArray[0].SaleNum
      // this.couponTotal = jieqian
    },
    chooseChange (i, item) { // 单选的change事件
      if (this.selectedData.indexOf(i) > -1) {
        var arrs = this.selectedData.filter(function (item) {
          return item != i;
        });
        this.selectedData = arrs;
      } else {
        this.selectedData.push(i);
      }
      this.couponArray = []
      this.couponList.forEach(item => {
        if (this.selectedData.includes(item.gSN)) {
          this.couponArray.push(item);
        };
      })
      let totalPrice = 0; //临时总价
      this.couponArray.forEach(function (element) {
        totalPrice += element.SaleNum * element.Price; //累计总价
      });
      this.couponTotal = totalPrice;
    },
    stepperCoupon () {
      let totalPrice = 0; //临时总价
      this.couponArray.forEach(function (element) {
        totalPrice += element.SaleNum * element.Price; //累计总价
      });
      this.couponTotal = totalPrice;
    },
    stepperdata (value) { // 景区不需要身份的时候
      let jieqian = this.datalist.Price * this.stepper
      this.Totalcost = this.roomsday * jieqian
      this.storagepiao = [{
        name: this.datalist.Name,
        Price: this.datalist.Price,
        value: value
      }]
    },
    PassengerDo () {//提交收货人信息接口
      if (this.checked == true) {
        this.linkmoren = 1
      } else {
        this.linkmoren = 0
      }
      let data = {
        DoType: 'Add',
        RealName: this.editlinkName,
        Mobile: this.editlinkPhone,
        IsDefault: this.linkmoren
      }
      this.editlinkdata.forEach(v => {
        if (v.label != '') {
          data[v.Key] = v.label
        }
      })
      if (this.editlinkName == '') {
        this.$toast('请输入姓名')
      } else if (this.editlinkPhone == '') {
        this.$toast('请输入手机号码')
      } else if (this.editlinkPhone.length != 11) {
        this.$toast('请输入正确的手机号码')
      } else {
        PassengerDo(data).then(res => {
          if (res.Code == 0) {
            this.PassengerList()
            this.editlink = false
            this.SelectLinkMan = false
            this.$toast('保存成功')
            this.editlinkName = ''
            this.editlinkPhone = ''
            this.editlinkdata.forEach(v => {
              v.label = ''
            })
          } else {
            this.$toast(res.Msg)
          }
        })
      }
    },
    editlinkCreden () {
      let data = {}
      CredentialsList(data).then(res => {
        this.editlinkdata = res.List
        this.editlinkdata.forEach(v => {
          v.label = ''
        })
      })
    },
    editlinkleft () {// 填写收货人信息
      this.editlink = false
    },
    LinkManleft () {
      console.log(this.lvkelist)
      this.SelectLinkMan = false
      let lvkearray = [] // 自定义一个选中数组
      this.lvkelist.forEach((v) => {
        if (v.IsDefault == true) {
          lvkearray.push(v)
          this.lvkearray = lvkearray // 选中的数组
          console.log(lvkearray);
        }
      })
      this.yeslvke()
    },
    lianxren () {
      this.editlink = true
    },
    onBlurInput () { // 失去焦点时
      let height = document.body.scrollHeight
      window.scroll(0, height)
    },
    inputdata (data) {
      if (data == 'Area') {
        this.shouhuodizhi = true
      }
    },
    confirm (value) {
      this.shouhuodizhi = false
      let arr = []
      this.Areaname = value[0].name + ',' + value[1].name + ',' + value[2].name
      this.UserInfoConfig.List.forEach(e => {
        if (e.Key == 'Area') {
          arr.push(value[0].name)
          arr.push(value[1].name)
          arr.push(value[2].name)
          e.name = arr
        }
      })
    },
    Result () { // 下单
      let dataa = 1
      let PassengerInfo = {} // 提交留资信息
      let UserInfo = {} // 提交预定人/收货地址信息
      let GoodsList = [] // 最终提交的参数
      let newObj = {}
      newObj.gSN = this.$route.query.gSN
      newObj.sharecode = Cookies.get("sharecode") || ''
      //newObj.withGoodsId = this.couponArray.length>0?this.couponArray[0].gautoid:0
      if (this.checked == true) { // 不用选
        if (this.datalist.ChooseDateType == 1) { // 单选
          if (this.time1 == '') {
            this.$toast('请选择日期')
            return
          } else if (this.time1 == 0) {
            this.$toast('请选择时间段')
            return
          } else {
            newObj.Date = this.time1
            newObj.hSN = this.value1
          }
        }
        if (this.ticketlist.length != 0) { // 判断是否留资
          let thesame = this.ticketlist.filter(v => {
            let key = v.shul
            if (v.NeedInfo == '') { // 判断 NeedInfo 是否留资，不留资就传数量
              PassengerInfo[key] = {}
              PassengerInfo[key].Num = v.Key
            } else {
              PassengerInfo[key] = {}
              PassengerInfo[key].List = []
              v.newarr.forEach(e => {
                var newPassenger = {}
                v.NeedInfo.forEach(item => { // 配置 NeedInfo里面的值
                  if (item == 'UName') {
                    newPassenger.UName = e.UName
                  }
                  if (item == 'IDCard') {
                    newPassenger.IDCard = e.IDCard
                  }
                  if (item == 'Mobile') {
                    newPassenger.Mobile = e.Mobile
                  } else {
                    newPassenger = e
                  }
                })
                PassengerInfo[key].List.push(newPassenger)
              })
            }
          })
          newObj.PassengerInfo = PassengerInfo
        } else {
          if (this.stepper == 0) {
            this.$toast('请选择数量')
          } else {
            newObj.Num = this.stepper
          }
        }
        this.UserInfoConfig.List.forEach(v => { // 下单填写资料//
          let key = v.Key
          if (v.name == '') {
            this.$toast('请填写完整资料')
          } else {
            UserInfo[key] = v.name
          }
        })
        newObj.PassengerInfo = PassengerInfo
        newObj.UserInfo = UserInfo
        GoodsList = [newObj]
        if (this.couponArray.length > 0) {
          this.couponArray.forEach(v => {
            let coupondata = {};
            for (var i in newObj) {  //遍历obj对象，把它的所有成员赋值给对象obj1
              coupondata[i] = newObj[i];
            }
            // let coupondata = {};
            // coupondata = this.clone(newObj);
            coupondata.gSN = v.gSN;
            this.$set(coupondata, 'withGoodsId', this.datalist.gautoid)
            this.$set(coupondata, 'Num', v.SaleNum)
            GoodsList.push(coupondata)
          })
        }
        let data = {
          GoodsList: GoodsList
        }
        console.log(GoodsList)
        createOrder(data).then(res => {
          if (res.Code == 0) {
            this.$toast.loading({
              message: '正在提交订单...',
              forbidClick: true
            })
            let urldata = "https://www.anyiyou.cn/view/#/User/UserOrderdetails"
            let ordSN = res.ordSN;
            let url = urldata + '?ordSN=' + ordSN.split(',')[0]
            //let url = "http://www.anyiyou.cn/view/#/me"
            window.location.href = 'https://www.anyiyou.cn/public/program/pay/auto.aspx?sns=' + ordSN +
              '&bkurl=' + escape(url)
          } else if (res.Code == 1) {
            this.$router.push({
              path: '/Login/Phonelogin'
            })
          } else {
            this.$toast(res.Msg)
          }
        })
      } else {
        this.$toast('请同意安易游条款')
      }
    },
    clone (obj) {  //对象克隆方法
      function Temp () { };  //新建空构造函数
      Temp.prototype = obj;  //把参数对象赋值给该构造函数的原型方法
      return new Temp();  //返回实例化后的对象
    },
    detail () { // 费用说明
      this.arrow = true
    },
    clickshow (Tip) { // 订票须知
      this.ticketshow = true
      this.showzi = Tip
    },
    dropdomn (time) { // 选中的时间段
      let data = {
        Date: this.time1,
        gSN: this.$route.query.gSN,
        hSN: time
      }
      function isArray (o) {
        return Object.prototype.toString.call(o) == '[object Array]'
      }
      // console.log(isArray(this.datalist.PassengerInfoConfig)) //判断类型是否为数组
      if (isArray(this.datalist.PassengerInfoConfig) == true) {
        PassengerPriceList(data).then(res => { // 请求接口，获取时间段的价格，在传到this.ticketlist的里面
          if (res.Code == 0) {
            res.List.forEach((v, e) => {
              this.ticketlist.forEach((i, n) => { // 判断票的类型是否一致
                if (e == n) {
                  i.Price = v.Price
                  this.$set(i, n, i.Price)
                }
              })
            })
          } else {
            this.$toast({
              message: res.Msg
            })
          }
        })
      } else {
        this.option1.forEach((v, p) => {
          if (v.value == time) {
            this.ticketlist[0].Price = v.Price
            this.$set(this.ticketlist)
          }
        })
      }
    },
    change (name) { // 选择旅客
      let lvkearray = [] // 自定义一个选中数组
      this.lvkelist.forEach((v) => {
        if (v.piSN == name) {
          lvkearray.push(v)
          this.lvkearray = lvkearray // 选中的数组
          console.log(lvkearray);
        }
      })
      this.yeslvke()
    },
    yeslvke () { // 确定旅客
      let newarrtwo = []
      let newtop = {}
      if (this.lvkearray.length == 0) {
        this.$toast('请选择联系人')
      } else {
        this.lvkearray.forEach(v => {
          console.log(v);
          let hasCard = true
          console.log(this.lvkeObject)
          this.lvkeObject.NeedInfo.forEach(i => {
            newtop.piSN = v.piSN
            if (i == 'UName') {
              newtop.UName = v.RealName
            } else if (i == 'Mobile') {
              newtop.Mobile = v.Mobile
            } else {
              if (typeof (v[i]) !== 'undefined') {
                newtop[i] = v[i]
              } else {
                hasCard = false
              }
            }
          })
          if (!hasCard) {
            this.$toast('证件信息不对，请选择正确的身份')
            return
          }
          this.ticketlist.forEach(item => { // 把选中的票，传到对应的这个数组的对象里面
            if (item.ID === this.lvkeObject.ID) { // 票
              // this.storagepiao.forEach(vb => {
              if (!item.newarr) item.newarr = []
              let piao = this.storagepiao // 获取价格详细
              if (item.newarr.length < 5) { // 判断不能超过五位联系人
                if (item.newarr.length == 0) { // 判断选中的数组是否为空，为空就添加一条
                  item.newarr.push(newtop)
                  piao.push({
                    name: item.Title,
                    Price: item.Price,
                    value: item.newarr.length,
                    Totalprice: item.newarr.length * item.Price
                  })
                  let Price = 0
                  piao.forEach(e => {
                    Price += e.Totalprice
                    this.Totalcost = Price
                  })
                  this.SelectLinkMan = false
                  return
                }
                let pNewarr = item.newarr.filter(p => {
                  if (p.piSN == newtop.piSN) {
                    this.$toast('联系人已存在')
                  }
                  return p.piSN == newtop.piSN
                })
                if (pNewarr.length == 0) {
                  let Price = 0
                  piao.forEach(ste => {
                    if (ste.name == item.Title) {
                      ste.value++
                      ste.Totalprice = ste.value * ste.Price
                    }
                    Price += ste.Totalprice
                    this.Totalcost = Price
                  })
                  item.newarr.push(newtop) // 选中的联系人
                  this.SelectLinkMan = false
                }
              } else {
                this.$toast('最多一次五位')
                this.SelectLinkMan = false
              }
            }
          })
        })
      }
    },
    selectLinkMan (data) { // 弹出旅客列表
      this.SelectLinkMan = true
      this.lvkeObject = data // 获取当前的那张票的对象
      this.newArr()
    },
    newArr () {
      let newarr = []
      this.lvkelist.forEach(itme => {
        let newtop = {}
        var isOK = true
        this.lvkeObject.NeedInfo.forEach(nitem => {
          if (nitem == 'UName') {
            nitem = 'RealName'
          }
          if (itme[nitem] == undefined || typeof (itme[nitem]) === 'undefined' || itme[nitem] == '') {
            isOK = false
          }
        })
        if (isOK) {
          newtop = itme
          newtop.UName = itme.RealName
          newarr.push(newtop)
        }
      })
      console.log(newarr)
      this.Passengerlist = newarr
    },
    PassengerList () { // 旅客请求
      let data = {
        PageSize: 100
      }
      let lvkearray = [] // 自定义一个默认选中数组
      let newarr = []
      PassengerList(data).then(res => {
        this.lvkelist = res.List
      })
    },
    getDateWeek: function (date) { // 判断是周几
      var day = new Date(Date.parse(date))
      var today = new Array(0, 1, 2, 3, 4, 5, 6)
      var week = today[day.getDay()]
      return week
    },
    getDateWeekk: function (date) { // 判断是周几
      var day = new Date(Date.parse(date))
      var today = new Array('周日', '周一', '周二', '周三', '周四', '周五', '周六')
      var week = today[day.getDay()]
      return week
    },
    whichday () {
      this.res.forEach(v => {
        let day = v.nian + '-' + v.yue + '-' + v.data[0].riqi // 获取每个数组的第一天
        // let tian = v.data[0].riqi
        let bu = this.getDateWeek(day)
        for (var ii = 0; ii < bu; ii++) {
          v.data.unshift('')
        }
      })
    },
    getBeforeDate (num, time) { // 获取当前日期的前几天
      let n = num
      let d = ''
      if (time) {
        d = new Date(time)
      } else {
        d = new Date()
      }
      let year = d.getFullYear()
      let mon = d.getMonth() + 1
      let day = d.getDate()
      if (day <= n) {
        if (mon > 1) {
          mon = mon - 1
        } else {
          year = year - 1
          mon = 12
        }
      }
      d.setDate(d.getDate() - n)
      year = d.getFullYear()
      mon = d.getMonth() + 1
      day = d.getDate()
      let s = (mon < 10 ? ('0' + mon) : mon) + '-' + (day < 10 ? ('0' + day) : day)
      return s
    },
    getBefore (num, time) { // 当前日期前几天的年月日
      let n = num
      let d = ''
      if (time) {
        d = new Date(time)
      } else {
        d = new Date()
      }
      let year = d.getFullYear()
      let mon = d.getMonth() + 1
      let day = d.getDate()
      if (day <= n) {
        if (mon > 1) {
          mon = mon - 1
        } else {
          year = year - 1
          mon = 12
        }
      }
      d.setDate(d.getDate() - n)
      year = d.getFullYear()
      mon = d.getMonth() + 1
      day = d.getDate()
      let s = (year < 10 ? ('0' + year) : year) + '-' + (mon < 10 ? ('0' + mon) : mon) + '-' + (day < 10 ? ('0' + day) : day)
      return s
    },
    addDate () { // 获取今天的日期
      let nowDate = new Date()
      let date = {
        year: nowDate.getFullYear(),
        month: nowDate.getMonth() + 1,
        date: nowDate.getDate()
      }
      let timeaaa = date.year + '-' + date.month + '-' + date.date
      this.jinqiri = timeaaa
      this.time1 = timeaaa
      if (this.datalist.ChooseDateType == 1) { // 默认选中今天请求出价格
        let shuju = {
          Date: this.time1,
          gSN: this.$route.query.gSN
        }
        function isArray (o) {
          return Object.prototype.toString.call(o) == '[object Array]'
        }
        // console.log(isArray(this.datalist.PassengerInfoConfig)) //判断类型是否为数组
        if (isArray(this.datalist.PassengerInfoConfig) == true) {
          PassengerPriceList(shuju).then(res => {
            if (res.Code == 2) {
              this.$toast('当天未开启售卖')
              setTimeout(() => {
                this.$router.go(-1)
              }, 5000);
              return false
            }
            res.List.forEach(v => {
              this.ticketlist.forEach((i, p) => {
                if (v.Key == i.shul) {
                  i.Price = v.Price
                  this.$set(i, p, i.Price)
                }
              })
            })
          })
        }
      }
      if (this.datalist.HourList != null) {
        let data = {
          Date: timeaaa,
          gSN: this.$route.query.gSN
        }
        DatePriceDeails(data).then(res => { // 默认选中今天的时间
          if (res.Code == 0) {
            this.riqishow = false
            let option = []
            let Price = res.Item.HourList[0].Price
            res.Item.HourList.forEach(v => {
              let store = v.Store
              if (store == -1) {
                store = '不限'
              } else {
                store = '剩余：' + v.Store + '张票'
              }
              option.push({
                text: v.Begin + '-' + v.End + '(' + store + ')',
                value: v.hSN,
                Price: v.Price
              })
              this.option1 = option
            })
          }
        })
      }
      let time = date.year + '/' + date.month + '/' + date.date
      // let arr = [];
      let arrr = []
      // for (let i = -2; i < 1; i++) { //获取景区前三天的时间
      //   arr.push(this.getBefore(i, time))
      // }
      // this.Todaysdate = arr //景区传入前三天的数组
      let timelist = date.year + '/' + date.month + '/' + date.date
      // ----------根据后台传来的值判断 多少天能购票
      let timedata = []
      this.timedata = timedata
      // 重点！！！！！！
      // this.PreSalePeriod 不得为0 ！！！！！！！！！！！
      if (this.PreSalePeriod == 0) {
        this.PreSalePeriod = 30
      }
      for (let i = -this.PreSalePeriod + 1; i < 1; i++) {
        timedata.push(this.getBefore(i, timelist))
        // timedata.replace(/\:/g, "-").split("-")
      }
      function obj2key (obj, keys) { // 去重数组
        var n = keys.length
        var key = []
        while (n--) {
          key.push(obj[keys[n]])
        }
        return key.join('|')
      }
      function uniqeByKeys (array, keys) { // 去重数组
        var arr = []
        var hash = {}
        for (var i = 0, j = array.length; i < j; i++) {
          var k = obj2key(array[i], keys)
          if (!(k in hash)) {
            hash[k] = true
            arr.push(array[i])
          }
        }
        return arr
      }
      let timedate = []
      let niandata = [] // 年
      // let ri = []
      let Firstarray = [] // 大数组
      timedata.forEach((v, i) => { // 年月日分割出来
        let shul = v.replace(/\:/g, '-').split('-')
        timedate.push(v.replace(/\:/g, '-').split('-'))
        niandata.unshift({
          nian: shul[0],
          yue: shul[1]
        })
      })
      Firstarray = uniqeByKeys(niandata, ['nian', 'yue'])
      Firstarray.forEach((v, i) => { // 年月日分割出来
        let a = v.yue
        let datari = []
        timedate.forEach((e) => {
          if (a == e[1]) { // 判断月份是否一致，一直的话，把当前日期渲染到对应的下面
            datari.unshift({
              riqi: e[2]
            })
            v.data = datari
          }
        })
      })
      this.res = Firstarray
    },
    selectdate (year, month, day, money, index) { // 选择日期
      function isArray (o) {
        return Object.prototype.toString.call(o) == '[object Array]'
      }
      if (money == undefined) {
        this.$toast({
          message: '当前日期不可选中'
        })
      } else {
        this.index = index
        this.riqishow = false
        let time = year + '-' + month + '-' + day
        this.time1 = time
        if (index == 4) {
          this.time = year + '-' + month + '-' + day
          this.time1 = this.time
        }
        if (this.datalist.HourList != null) {
          let data = {
            Date: this.time1,
            gSN: this.$route.query.gSN
          }
          DatePriceDeails(data).then(res => { // 选中日期后，请求时间段数据，并传入到this.option1 的数组里面
            if (res.Code == 0) {
              let option = []
              if (res.Item.HourList == undefined) { } else {
                res.Item.HourList.forEach(v => {
                  let store = v.Store
                  if (store == -1) {
                    store = '不限'
                  } else {
                    store = '剩余：' + v.Store + '张票'
                  }
                  option.push({
                    text: v.Begin + '-' + v.End + '(' + store + ')',
                    value: v.hSN,
                    Price: v.Price
                  })
                  this.option1 = option
                })
                this.dropdomn(this.value1)
              }
            } else {
              this.$toast({
                message: res.Msg
              })
            }
          })
        }
        let shuju = {
          Date: this.time1,
          gSN: this.$route.query.gSN
        }
        // console.log(isArray(this.datalist.PassengerInfoConfig))//判断类型是否为数组
        if (isArray(this.datalist.PassengerInfoConfig) == true) {
          PassengerPriceList(shuju).then(res => {
            // this.riqishow = false;
            res.List.forEach(v => {
              this.ticketlist.forEach((i, p) => {
                if (v.Key == i.shul) {
                  i.Price = v.Price
                  this.$set(i, p, i.Price)
                }
              })
            })
          })
        } else {
          if (this.ticketlist.length == 0) {
            this.datalist.Price = money
          } else {
            this.ticketlist[0].Price = money
          }
        }
      }
      if (this.datalist.PassengerInfoConfig == null) {
        this.stepperdata(this.stepper)
      } else {
        // let Price = 0
        this.ticketlist.forEach(v => {
          this.storagepiao.forEach(itme => {
            if (v.Title == itme.name) {
              itme.Price = v.Price
            }
          })
        })
        // this.storagepiao.forEach(i=>{
        //   Price += i.Price
        //   this.Totalprice = Price
        // })
      }
    },
    vanpopup () {
      this.riqishow = true
    },
    arrowPopup () {
      this.arrow = true
    },
    arrowtui () {
      this.arrow = false
    },
    descPopup () { // 弹出订票须知
      this.desc = true
    },
    desctui () { // 关闭订票须知
      this.desc = false
    },
    termsPopup () { // 弹出协议
      this.terms = true
    },
    termstui () { // 关闭协议
      this.terms = false
    },
    onchange (value) {
      let shul = this.data.Price // 自定义一个值
      let tong = value * shul // 乘以当前计步器里面的值
      this.price = tong
    },
    routejump () { // 返回景区详情
      this.$router.go(-1)
    },
    tk () { // 打开安易游预定条例
      this.tiaokuan = true
    },
    gbtk () {
      this.tiaokuan = false
    },
    iconshanchu (pisn, tip, indexx) { // 当用户点击 删除联系人时
      this.storagepiao.forEach((v, index) => { // 每次删除联系人时更新价格
        if (tip == v.name) {
          v.value--
          this.Totalcost -= v.Price
          if (v.value == 0) {
            this.storagepiao.splice(index, 1)
          }
        }
      })
      this.ticketlist[indexx].newarr.forEach((item, key) => {
        if (item.piSN == pisn) {
          this.ticketlist[indexx].newarr.splice(key, 1) // 删除e数组
          this.ticketlist = JSON.parse(JSON.stringify(this.ticketlist))
        }
      })
    },
  },
  created () {
    this.getUserInfoByToken()
  },
  mounted () {
    setTimeout(() => {
      this.addDate()
      this.DatePriceList()
      this.whichday()
    }, 500)
    this.editlinkCreden()
    this.vdetailsdata()
    this.PassengerList() // 旅客
  }
}
</script>

<style lang="scss">
.Ordersynthesis {
  width: 100%;
  height: 100%;
  position: relative;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;

  .van-field__label {
    width: 110px;
  }

  .picker-calendar-day.picker-calendar-day-selected span {
    background: #46d0ca !important;
    width: 40px !important;
    height: 40px !important;
  }

  .calendarBtn {
    color: #46d0ca !important;
  }

  .picker-calendar-day span b.festivalColor {
    color: #46d0ca !important;
  }

  .picker-calendar-day span b.today {
    color: #46d0ca !important;
  }

  .picker-calendar-day.picker-calendar-day-selected span b {
    color: white !important;
  }

  .bj {
    .van-nav-bar {
      position: fixed;
      width: 100%;
      left: 0;
    }

    .van-icon {
      color: white !important;
    }
  }

  .ticket {
    /* 盒子 */
    width: 100%;
    height: auto;
    // border-radius: 0.625rem;
    background: #f8f8f8;
    display: flex;
    justify-content: center;
    margin: 0 auto;
    // border-bottom: 1px solid #eaeaea;

    .adult-ticket {
      /* 成人票 */
      font-size: 20px;
      display: flex;
      justify-content: space-between;
      height: 60px;
      align-items: center;
      border-bottom: 1px solid #eaeaea;
    }

    .rooms {
      .rooms_txt {
        padding: 10px 0;
        font-size: 16px;
        color: #000000;
        font-weight: 400;

        span {
          font-size: 13px;
          margin-left: 4px;
        }
      }

      .rooms_select {
        width: 100%;
        display: flex;
        justify-content: space-between;
        font-size: 15px;
      }

      .rooms_time {
        // opacity: 0;
        height: 40px;
        margin-top: -30px;
        z-index: 9;

        .selectedDate {
          opacity: 0;
        }
      }
    }

    .ddto {
      display: flex;
      // height: 50px;
      width: 100%;
      flex-wrap: wrap;

      div {
        width: 22%;
        height: 30px;
        text-align: center;
        line-height: 30px;
        border: 1px solid #46d0ca;
        font-size: 14px;
        font-weight: 400;
        // margin-right: 10px;
        color: #46d0ca;
        // margin: 4px;
      }
    }

    /* 游玩日期 */
    .playdate {
      display: flex;
      flex-direction: column;

      .selectdate {
        display: flex;

        /* align-items: center; */
        .selectdate-div {
          width: 22%;
          height: 70px;
          display: flex;
          align-items: center;
          flex-direction: column;
          font-size: 13px;
          justify-content: center;
          background: #ececec;
          margin-left: 0.625rem;
        }

        .active {
          border: 1px solid #46d0ca;
          color: #46d0ca;
        }

        .week {
          color: #68c5ba;
        }

        .nostate {
          color: #b5b5b5;
        }
      }
    }

    .period {
      //选择入园时间
      display: flex;
      align-items: center;
      height: 50px;

      p {
        width: 30%;
      }

      .van-dropdown-menu {
        width: 79%;
        height: 33px;
        border: 1px solid #eaeaea;
        margin-left: 0px;

        .van-dropdown-menu__title--active {
          color: #46d0ca;
        }

        .van-dropdown-item__content {
          height: 250px;
        }
      }
    }
  }

  .select {
    width: 100%;
    margin: 0 auto;
    background: #f8f8f8;

    .select_select {
      display: flex;
      width: 95%;
      flex-direction: column;
      margin: 0 auto;
      border-bottom: 1px solid #eaeaea;

      .select_box {
        width: 100%;
        display: flex;
        height: 30px;
        justify-content: space-between;
        font-size: 13px;
        border-bottom: 1px solid #eaeaea;
        margin-top: 20px;
      }

      .select_bottm {
        display: flex;
        justify-content: space-between;

        .pedometer {
          display: flex;
          flex-direction: column;
          width: 100%;

          .protection {
            display: flex;

            div {
              display: flex;
              align-items: center;
              margin-right: 10px;

              .van-icon {
                font-size: 14px !important;
              }
            }
          }

          .notice {
            width: 30%;
            height: 45px;
            display: flex;
            align-items: center;
            color: #46d0ca;
          }

          .ddto {
            display: flex;
            // height: 50px;
            width: 100%;
            flex-wrap: wrap;

            div {
              width: 100px;
              height: 35px;
              text-align: center;
              line-height: 35px;
              border: 1px solid #46d0ca;
              font-size: 14px;
              font-weight: 400;

              // margin: 5px 5px;
              .van-icon {
                font-size: 20px !important;
              }
            }
          }
        }

        .van-stepper {
          position: absolute;
          right: 5px;
          margin-top: 10px;
        }
      }
    }
  }

  .scheduler {
    width: 100%;
    margin-top: 10px;
    background: #f8f8f8;

    .scheduler_txt {
      padding: 10px;
      font-size: 18px;
      font-weight: 400;
      color: rgb(40, 40, 40);
    }

    .scheduler_people {
      padding: 0 10px;
      display: flex;

      div {
        width: 80px;
        height: 30px;
        text-align: center;
        line-height: 30px;
        border: 1px solid #46d0ca;
        margin-right: 10px;
        font-size: 14px;
        font-weight: 400;
        color: #46d0ca;
      }
    }

    .scheduler_data {
      display: flex;
      flex-direction: column;
      margin-top: 10px;
      font-size: 13px;

      .areaname {
        border: 1px solid #ced4da;
        width: 78%;
        height: 25px;
        background: white;
        padding-left: 5px;
        line-height: 25px;
        color: #a9a9a9;
      }

      .data_name {
        display: flex;
        width: 90%;
        margin: 5px auto;
        align-items: center;
        span {
          width: 25%;
        }

        input {
          width: 78%;
          padding-left: 5px;
          // background: none;
        }
        .Areaname {
          color: #495057 !important;
        }
      }
    }
  }

  .couponGroup {
    width: 100%;
    margin-top: 10px;
    background: #f8f8f8;

    /deep/ .van-radio__label {
      width: 100%;
    }
    .yd-checklist-item {
      display: flex;
      padding: 0 0 0 10px;
      .van-checkbox {
        padding-right: 5px;
      }
      .van-checkbox__icon--checked .van-icon {
        background-color: #46d0ca !important;
        border-color: #46d0ca !important;
      }
      .van-checkbox__label {
        width: 90%;
      }
      .van-icon {
        color: white !important;
        font-size: 16px !important;
      }
    }
    .couponGroup_txt {
      padding: 10px;
      font-size: 16px;
      font-weight: 400;
      color: rgb(40, 40, 40);
    }
    .couponGroup_data {
      display: flex;
      width: 100%;
      flex-direction: column;
      margin-top: 10px;
      font-size: 13px;
      .data_name {
        display: flex;
        width: 90%;
        margin: 5px auto;
        align-items: center;
        span {
          width: 25%;
        }

        input {
          width: 78%;
          padding-left: 5px;
        }
      }
    }
  }

  .terms {
    display: flex;
    margin-top: 20px;
    align-items: center;

    .van-checkbox__icon--checked .van-icon {
      background-color: #46d0ca !important;
      border-color: #46d0ca !important;
    }

    .van-icon {
      color: white !important;
      font-size: 16px !important;
    }
  }

  .bottom {
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 10px;
    background: #ececec;

    .detail {
      display: flex;
      font-size: 14px;
      font-weight: 400;
    }

    .van-button {
      padding: 0px 30px;
      height: 35px;
      line-height: 35px;
      border-radius: 5px;
    }
  }

  .tk_box {
    .van-popup {
      height: 450px;
      font-size: 14px;

      .tiaok_txt {
        width: 100%;
        position: fixed;
        height: 40px;
        background: white;
        display: flex;
        align-items: center;
        justify-content: center;
        border-bottom: 1px solid #eee;

        .van-icon {
          position: absolute;
          right: 20px;
        }
      }

      .tiaok {
        width: 95%;
        margin: 0 auto;

        p {
          font-size: 12px;
        }
      }
    }
  }

  // 特产
  .details-box {
    width: 100%;
    display: flex;
    justify-content: center;

    .delails-div {
      width: 95%;
      height: 100%;
      background: #f7f7f7;
      display: flex;
      justify-content: center;
      color: #969696;
      margin-top: 0.625rem;
      flex-wrap: wrap;

      .delails-first {
        width: 90%;
        font-size: 14px;
        display: flex;
        flex-direction: column;

        .delails-Secondary {
          display: flex;
          justify-content: space-between;
          height: 2.5rem;
          align-items: center;
        }

        .secondary-first {
          height: 1.875rem;
          border-bottom: 0.0625rem solid #e8e8e8;
        }
      }

      .specialty-first {
        width: 90%;
        height: 9.375rem;
        display: flex;
        justify-content: center;
        align-items: center;
        border-bottom: 0.0625rem solid #e8e8e8;

        .specialty-secondary {
          width: 45%;
          height: 90%;

          img {
            width: 100%;
            height: 100%;
          }
        }
      }

      .quantity_first {
        width: 90%;
        height: 3.75rem;
        display: flex;
        font-size: 14px;
        justify-content: space-between;
        align-items: center;
        border-bottom: 0.0625rem solid #e8e8e8;
      }

      .delivery-first {
        width: 90%;
        height: 2.5rem;
        display: flex;
        align-items: center;
        font-size: 14px;
        justify-content: space-between;
        border-bottom: 1px solid #e8e8e8;
      }

      .commodity-first {
        width: 90%;
        display: flex;
        justify-content: space-between;
        flex-direction: column;
      }
    }
  }

  .lvke {
    width: 100%;
    height: 100%;

    .xuanzhe {
      width: 100%;
      height: 100%;

      .yd-checklist-item {
        display: flex;
        position: relative;
        height: 3.125rem;
        align-items: center;
        background: white;
        border-bottom: 0.0625rem solid #eee;

        .van-checkbox__icon--checked .van-icon {
          background-color: #46d0ca !important;
          border-color: #46d0ca !important;
        }

        .van-icon {
          color: white !important;
          font-size: 16px !important;
        }
      }
    }
  }

  .ioc {
    font-size: 25px !important;
  }
}
</style>
